import { Card, Statistic, Tag } from "antd";

export default ({ data }) => {
  if (!data) {
    return null;
  }

  return (
    <div
      className="kpi-cards"
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: "16px", // 设置卡片间距
      }}
    >
      <Card variant="borderless" style={{ flex: 1, minWidth: "200px" }}>
        <Statistic title="用户总数" value={data.users} />
        <Tag color="green">+12%周环比</Tag>
      </Card>
      <Card variant="borderless" style={{ flex: 1, minWidth: "200px" }}>
        <Statistic title="订单量" value={data.orders} />
        <Tag color="red">+12%周环比</Tag>
      </Card>
      <Card variant="borderless" style={{ flex: 1, minWidth: "200px" }}>
        <Statistic title="营收额" value={data.revenue} />
        <Tag color="green">+12%周环比</Tag>
      </Card>
      <Card variant="borderless" style={{ flex: 1, minWidth: "200px" }}>
        <Statistic title="完成率" value={data.serverLoad} />
        <Tag color="orange">+12%周环比</Tag>
      </Card>
    </div>
  );
};
